<template>
  <a-modal
      v-model:visible="visible"
      modal-class="modal-form"
      title-align="start"
      :title="title"
      :top="80"
      :width="800"
      :align-center="false"
      :draggable="true"
      :mask-closable="false"
      :unmount-on-close="true"
      :ok-button-props="{ disabled: loading }"
      :cancel-button-props="{ disabled: loading }"
      :on-before-ok="handlerOk"
      @close="handleClose"
  >
    <a-spin class="form-full" :loading="loading">
      <a-form
          ref="formRef"
          :model="formModel"
          label-align="right"
          :auto-label-width="true"
          :rules="formRules"
      >
        <a-row>
        <a-col :span="12">
        <!-- 名称 -->
        <a-form-item field="title" label="配置项名称">
          <a-input v-model="formModel.title" placeholder="请输入配置项名称" />
        </a-form-item>
       </a-col>
          <a-col :span="12">
            <!-- 名称 -->
            <a-form-item field="type" label="配置类型">
              <a-select :style="{width:'320px'}"  v-model="formModel.type" placeholder="请选择配置类型" >
                <a-option label="输入框" value="input"  />
                <a-option label="文本框" value="textarea"/>
                <a-option label="数字" value="input-number"/>
                <a-option label="密码" value="input-password"/>
                <a-option label="单选框" value="radio-group"/>
                <a-option label="复选框" value="checkbox-group"/>
                <a-option label="下拉框" value="select"/>
                <a-option label="日期" value="date-picker"/>
                <a-option label="时间" value="time-picker"/>
                <a-option label="单张图片" value="image"/>
                <a-option label="多张图片" value="images"/>
                <a-option label="单个文件" value="file"/>
                <a-option label="多个文件" value="files"/>
                <a-option label="富文本编辑器" value="ueditor"/>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
        <!-- 编码 -->
        <a-form-item field="code" label="配置项编码">
          <a-input v-model="formModel.code" placeholder="请输入配置项编码" />
        </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- 编码 -->
            <a-form-item field="value" label="配置项值">
              <a-input v-model="formModel.value" placeholder="请输入配置项值" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <!-- 编码 -->
            <a-form-item field="options" label="配置项">
              <a-textarea v-model="formModel.options" placeholder="请输入配置项" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- 状态 -->
            <a-form-item label="状态">
              <a-radio-group v-model="formModel.status">
                <a-radio :value="1">正常</a-radio>
                <a-radio :value="2">停用</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="12">
        <!-- 排序 -->
        <a-form-item label="排序">
          <a-input-number
              v-model="formModel.sort"
              :style="{ width: '320px' }"
              placeholder="请输入排序"
              mode="button"
          />
        </a-form-item>
          </a-col>
        <!-- 备注 -->
        <a-form-item label="备注" field="note">
          <a-textarea v-model="formModel.note" placeholder="请输入备注" />
        </a-form-item>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script setup lang="ts">
import useLoading from '@/hooks/loading';
import useVisible from '@/hooks/visible';
import { UpdateRequest, updateRows } from '@/api/system/configData';
import { Message } from '@arco-design/web-vue';
import formRules from './types/form.rules';

const { visible, setVisible } = useVisible();
const { loading, setLoading } = useLoading();
const title = ref<string>();
const isAddHandle = ref<boolean>(true);
const defaultForm = (): UpdateRequest => {
  return {
    id: undefined,
    title: undefined,
    code: undefined,
    status: 1,
    note: undefined,
    config_id:undefined,
    sort: 50,
  };
};
const formRef = ref();
const formModel = ref<UpdateRequest>({});
const emits = defineEmits(['restart']);
const renderForm = (record: any) => {
  formModel.value = { ...record };
};
// 打开新增
const openAdd = (id: number) => {
  title.value = '添加配置项';
  isAddHandle.value = true;
  renderForm({ ...defaultForm() });
  formModel.value.config_id=id
  setVisible(true);
};
// 打开修改
const openUpdate = (record: any) => {
  title.value = '修改配置项';
  isAddHandle.value = false;
  renderForm({ ...defaultForm(), ...record });
  setVisible(true);
};
defineExpose({ openAdd, openUpdate });

const handlerClear = () => {
  setLoading(false);
};
// 确定
const handlerOk = async () => {
  setLoading(true);
  try {
    // 验证参数
    const error = await formRef.value.validate();
    if (error) {
      return false;
    }
    //  修改
    await updateRows(formModel.value);
    Message.success('操作成功');

    emits('restart');
    // 清空
    handlerClear();
    return true;
  } catch (e) {
    return false;
  } finally {
    setLoading(false);
  }
};
// 关闭
const handleClose = () => {
  handlerClear();
};
</script>

<style scoped lang="less"></style>
